iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1
自我挑戰組

語法改革!零基礎新手也能讀懂的JS!系列 第 5

Day05 語法改革!零基礎新手也能讀懂的JS - 運算式、運算子(上)

  • 分享至 

  • xImage
  •  

其實這也算是JS內的基本觀念,但本篇並不會講得太深入,稍微講解一下何謂運算式、運算子,並說明一下一些特殊情況,那麼我們就來看吧!

運算式(Expression)

可以想像成有值的東西都是運算式,或是只要是被賦予值,在等號右邊的都會是運算式的部分

let a = 1 + 1;

運算子(Operator)

簡單來說就是加、減、乘、除啦!那其實運算子有分很多種,我們只會講解其中幾種常用的運算子

算術運算子

其實前面再DAY03講數字基本型別的時候就有稍微提過一些特殊狀況這邊就不再提了,有興趣的新手們記得要去看唷DAY03!

加(+)

最基本的就是

let a = 1 + 1
console.log(a) // 2

但如果是數字加字串呢?

let a = 100 + 'abc'
console.log(a) // '100abc'

沒錯就是你想的那樣,在JS他並不會出錯,你也可能會覺得很不可思議!沒錯!我剛學的時候也是這樣想!!!太神奇啦傑克~~~~
原理是因為自動轉型的緣故,所以這邊如果對字串做加法的話,會將兩邊視為字串做連接,因為會將數字透過.toString()這個方法轉成字串可能像是這樣子

let a = (100).toString() + 'abc'

所以不管字串放在哪,只要跟數字相加的時候就會把數字轉成字串!

let a = true + 'abc' // 'trueabc'
let b = null + 'abc' // 'nullabc'
let c = null + 1 // 0 因為null嘗試被自動轉型為數字0

減(-)

其實跟加法一樣,不過唯一的不同就是減法會將不是數字的型別透過Number()轉型,所以字串轉型後會得到NaN

let a = 5 - 4 // 1
let b = 5 - 'abc' // NaN
let c = 5 - false // 5 因為false轉型成數字為0
let d = 5 - true // 4 因為true轉型成數字為1

乘(x)

也相對單純,只要注意false與truec還有字串的數字即可

let a = 10 * '5' // 50
let b = 10 * 'abc' // NaN
let c = 10 * false // 0 因為false轉型成數字為0
let d = 10 * true // 10 因為true轉型成數字為1

除(/)

如果被除數為0,需要看除數為正數還是負數,正數會得infinity,負數得-infinity

let a = 10 / '5' // 2
let b = 10 / 'abc' // NaN
let c = 10 / false // infinity 因為false轉型成數字為0 
let d = 10 / true // 10 因為true轉型成數字為1
let e = 0 / 0 // NaN

餘數(%)

會得到雙方相除後的餘數

let a = 10 % 4 // 2

比較特別的以下的情況

let a = Infinity % 10 // NaN
let b = Infinity % 0 // NaN
let c = Infinity % Infinity // NaN
let d = Infinity % -Infinity // NaN
let e = 10 % Infinity // 10
let f = 10 % -Infinity // 10
let g = 0 % Infinity // 0

比較運算子

在這邊要先理解一下======的差別,在DAY03有說明喔!還沒看到新手們記得先看XD

let a = 1
let b = 0
console.log(a == 1) // true
console.log(a == 'a') // true 因為兩個等號會自動轉型導致結果為true
console.log(a === 'a') // false 因為三個等號不會自動轉型導致結果為false
console.log(false == 0) // true
console.log(true == 1) // true

在JS也有!=!==,一樣一個等號會轉型兩個等號不會轉型!

今天就講解到這邊,大家明天見!


上一篇
Day04 語法改革!零基礎新手也能讀懂的JS - 物件與陣列
下一篇
Day06 語法改革!零基礎新手也能讀懂的JS - 運算式、運算子(下)
系列文
語法改革!零基礎新手也能讀懂的JS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言